<template>
	<view class="messageList">
		<!-- 顶部导航 -->
		<diyNavBar value='系统消息' :bottom='20' :fixed="true"></diyNavBar>
		<!-- 消息列表 -->
		<mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback" :top = '120 + $store.state.statusBarHeight'
		 :up = "upOption" :down="downOption">
			<view class="message-item" v-for="(item,index) in taskList" :key="index"
			@click="$util.redirectTo('/pages/messagedetails/messagedetails',{id:item.id})">
				<view class="top">
					<text class="top-text">{{item.title}}</text>
					<text class="top-time">{{item.create_time}}</text>
				</view>
				<view class="bottom" v-html="item.context"></view>
				<view class="dian" v-if="!item.count"></view>
			</view>
		</mescroll-body>
		<!-- 加载 -->
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	import diyNavBar from '../../component/diy-nav/diy-navbar.vue'
	import loadingCover from '../../component/loading-cover/loading-cover.vue'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default{
		components:{
			diyNavBar,loadingCover
		},
		mixins: [MescrollMixin], // 使用mixin
		data(){
			return {
				type:0,
				taskList:[],//展示的数据
				upOption:{
					page:{
						num:0,
						size:8
					}
				},//上拉参数配置
				downOption:{
					page:{
						num:0,
						size:8
					}
				}//下拉参数配置
			}
		},
		onLoad(option) {
			option.type?this.type = option.type :''
		},
		methods:{
			// 下拉刷新
			downCallback(page){
				this.mescroll.resetUpScroll()
			},
			//上拉加载
			upCallback(page){
				this.$http.sendrequest('/news/NewsList',{
					// page:page.num,
					// page_size:page.size,
					type:this.type
				}).then(res=>{
					if(res.code == 1){
						if(page.num == 1) this.taskList = []; //如果是第一页需手动制空列表
						this.taskList = this.taskList.concat(res.data);
						this.mescroll.endBySize(res.data.length, res.data.count);
						this.$refs.loadingCover.hide();
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.messageList{
		background: $uni-content-background-color;
		min-height: 100vh;
		padding-bottom: 20rpx;
		.message-item{
			margin: 0 30rpx 20rpx;
			padding: 50rpx 36rpx 50rpx 26rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			font-family: PingFangSC-regular;
			position: relative;
			.dian{
				position: absolute;
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				background: $uni-tabbar-hovercolor;
				top: 20rpx;
				left: 20rpx;
			}
			.top{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 22rpx;
				.top-text{
					font-size: 26rpx;
					font-weight: bold;
				}
				.top-time{
					font-size: 24rpx;
					color: #999999;
				}
			}
			.bottom{
				color: #666666;
				font-size: 26rpx;
				line-height: 2;
			}
		}
	}
	
</style>
